<template>
    <div class="amend-up">
        <el-dialog
            :visible.sync="visible"
            width="500px"
            style="height: 500px"
            :show-close="false"
            custom-class="public-dialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            v-if="visible"
        >
            <div slot="title" class="tilte">{{ formData.otherConfig.title }}</div>
            <el-form :model="formData.form" ref="form">
                <el-form-item
                    :label="item.label"
                    :label-width="item.labelWidth || '100px'"
                    v-for="(item, index) in formData.formConfig"
                    :key="index"
                    :prop="item.fieldName"
                    :rules="setRules(item)"
                >
                    <el-input
                        :placeholder="item.placeholder"
                        v-model="formData.form[item.fieldName]"
                        autocomplete="off"
                        v-if="item.type === 'input' && item.key != 'fold'"
                        :disabled="item.disabled"
                        @click.native="inputClick(item)"
                    ></el-input>
                    <el-select
                        v-if="item.type === 'input' && item.key === 'fold'"
                        :placeholder="item.placeholder"
                        v-model="formData.form[item.fieldName]"
                        autocomplete="off"
                    >
                        <el-option
                            v-for="(val, ind) in item.options"
                            :key="ind"
                            :label="val.label"
                            :value="val.value"
                        ></el-option>
                    </el-select>
                    <el-select
                        v-model="formData.form[item.fieldName]"
                        :placeholder="item.placeholder"
                        v-if="item.type === 'select'"
                        style="width: 300px"
                        :popper-append-to-body="false"
                    >
                        <el-option
                            v-for="option in item.options"
                            :key="option.value"
                            :label="option.label"
                            :value="option.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" class="cancel-style">{{
                    formData.otherConfig.cancelBtn
                }}</el-button>
                <el-button type="primary" @click="save" class="save-style">{{
                    formData.otherConfig.saveBtn
                }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'publicDialog',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false,
        },
        formData: {
            type: Object,
            default: () => {
                return {
                    formConfig: [],
                    form: {},
                    otherConfig: {},
                };
            },
        },
    },
    computed: {
        visible: {
            get() {
                return this.dialogVisible;
            },
            set(val) {
                this.$refs.form.clearValidate();
                this.$emit('update:dialogVisible', val);
            },
        },
    },
    data() {
        return {};
    },
    methods: {
        save() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$emit('submit', this.formData.form);
                    // console.log('====保存按钮', this.formData);
                }
            });
        },
        setRules({required, label, validator, type}) {
            const rules = [];
            if (required) {
                rules.push({
                    required: true,
                    message: `${type == 'select' ? '请选择' + label : label + '不能为空'}`,
                    trigger: ['change', 'blur'],
                });
            }
            if (validator) {
                rules.push({
                    validator: (rule, value, callback) =>
                        validator(rule, value, callback, {
                            item,
                        }),
                    trigger: ['change', 'blur'],
                });
            }
            return rules;
        },
        inputClick(item) {
            const {inputClick} = item;
            if (!inputClick) {
                return;
            }
            this.$parent[inputClick](item);
        },
    },
};
</script>
<style scoped>
.amend-up >>> .el-form-item__content {
}

.amend-up >>> .el-dialog {
    width: 50% !important;
    min-width: 400px !important;
    max-height: 600px;
}
</style>

<style scoped lang="scss">
.amend-up {
    .el-dialog__wrapper {
        height: 100% !important;
    }
}

:deep(.el-dialog) {
    background: transparent;
    background-image: url('@/assets/img/dialog.png');
    // background-size: cover;
    background-position: center;
    // background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 5999;
    min-height: 150px;
    display: flex;
    flex-direction: column;

    .tilte {
        background-image: url('@/assets/img/dialog-top.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 33px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        padding: 0 !important;
    }

    .el-dialog__header {
        padding: 0 0 20px 0;
    }

    .el-dialog__body {
        padding: 0px 30px 0;
        flex: 1;
        // display: flex;
        // justify-content: center;
        // align-items: center;
    }

    .el-form-item__label {
        color: #ffffff;
        font-size: 13px;
        font-weight: 300;
    }

    .el-dialog__footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 0 30px;
    }

    .el-form-item {
        margin-bottom: 20px;
    }

    .el-input__inner {
        background: #021045;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #1087f8;
        font-size: 12px;
        height: 35px;
        color: #ffffff;
    }

    .el-button {
        border: none;
        background: #021c34;
        box-shadow: inset 0px 0px 8px 0px #00c2ff;
        border-radius: 4px 4px 4px 4px;
        color: #ffffff;
        font-size: 12px;
        padding: 0px 20px !important;
        // line-height: 20px;
        height: 30px;
        border-radius: 3px 3px 3px 3px;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(43, 97, 137, 1), rgba(152, 211, 255, 1), rgba(43, 97, 137, 1)) 1 1;
    }

    .save-style {
        background: linear-gradient(180deg, #258cca 0%, #0e5fff 100%);
        border-image: linear-gradient(90deg, rgba(43, 97, 137, 1), rgba(152, 211, 255, 1), rgba(43, 97, 137, 1)) 1 1;
    }
    .el-select-dropdown {
        background: transparent;
        border-radius: 4px 4px 4px 4px;
        // border: 1px solid #1087f8;
        border: 0;
        font-size: 12px;
        color: #6b79af;
        z-index: 9999;
        .el-select-dropdown__item {
            margin-top: 1px;
            background: #021045;
            border: 1px solid #1087f8;
            // border-bottom: 0;
            border-radius: 4px 4px 4px 4px;
        }
    }
    .el-select-dropdown .el-select-dropdown__item.hover {
        z-index: 9999;
        color: #ffffff;
        background: rgba(45, 64, 129, 1);
        box-shadow: inset 0px 0px 6px 0px #0e5fff;
        border-radius: 4px 4px 4px 4px;
    }
    .popper__arrow::after {
        background: transparent;
        border-bottom-color: transparent;
        border: 0;
    }
    .popper__arrow {
        background: transparent;
        border-bottom-color: transparent;
        border: 0;
    }
}

// }
</style>
